﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CodeEditor.aspx.cs" Inherits="RichECMS.ServerPages.CoderEditor.CodeEditor" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>CodeMirror</title>
    <script src="../../sysCommon/sysScripts/jquery/1.7.2/Jquery.js" type="text/javascript"></script>
    <link href="Source/Commoncss.css" rel="stylesheet" type="text/css" />
    <link href="CodeMirror/lib/codemirror.css" rel="stylesheet" type="text/css" />
    <script src="CodeMirror/lib/codemirror.js" type="text/javascript"></script>
    <script src="CodeMirror/lib/util/loadmode.js" type="text/javascript"></script>
    <script src="CodeMirror/lib/util/closetag.js" type="text/javascript"></script>
    <script src="CodeMirror/lib/util/formatting.js" type="text/javascript"></script>
    <script src="CodeMirror/lib/util/searchcursor.js" type="text/javascript"></script>
    <script src="CodeMirror/lib/util/match-highlighter.js" type="text/javascript"></script>
    <script src="CodeMirror/lib/util/dialog.js" type="text/javascript"></script>
    <link href="CodeMirror/lib/util/dialog.css" rel="stylesheet" type="text/css" />
    <script src="CodeMirror/lib/util/search.js" type="text/javascript"></script>
    <!--皮肤-->
    <link href="CodeMirror/theme/ambiance.css" rel="stylesheet" type="text/css" />
    <link href="CodeMirror/theme/xq-dark.css" rel="stylesheet" type="text/css" />
    <link href="CodeMirror/theme/blackboard.css" rel="stylesheet" type="text/css" />
    <link href="CodeMirror/theme/cobalt.css" rel="stylesheet" type="text/css" />
    <link href="CodeMirror/theme/eclipse.css" rel="stylesheet" type="text/css" />
    <link href="CodeMirror/theme/elegant.css" rel="stylesheet" type="text/css" />
    <link href="CodeMirror/theme/erlang-dark.css" rel="stylesheet" type="text/css" />
    <link href="CodeMirror/theme/lesser-dark.css" rel="stylesheet" type="text/css" />
    <link href="CodeMirror/theme/monokai.css" rel="stylesheet" type="text/css" />
    <link href="CodeMirror/theme/neat.css" rel="stylesheet" type="text/css" />
    <link href="CodeMirror/theme/night.css" rel="stylesheet" type="text/css" />
    <link href="CodeMirror/theme/rubyblue.css" rel="stylesheet" type="text/css" />
    <link href="CodeMirror/theme/vibrant-ink.css" rel="stylesheet" type="text/css" />
    <!--皮肤结束-->
    <link href="CodeMirror/doc/docs.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .toolbar
        {
            margin-top: 5px;
        }
        .CodeMirror
        {
            border-top: 1px solid black;
            border-bottom: 1px solid black;
        }
        .activeline
        {
            background: #e8f2ff !important;
        }
        span.CodeMirror-matchhighlight
        {
            background: #e9e9e9;
        }
        .CodeMirror .CodeMirror-scroll
        {
            height: 368px;
        }
    </style>
</head>
<body onload="init()">
    <div id="styleContainor">
        <style type="text/css">
            .CodeMirror .CodeMirror-lines pre
            {
                font-size: 14px;
                line-height: 22px;
            }
            .CodeMirror pre
            {
                font-size: 14px;
                line-height: 22px;
            }
            .toolbar input, label
            {
                vertical-align: middle;
            }
        </style>
    </div>
    <div class="mainbody">
        <div class="toolbar">
            工具栏:<input type="button" value="格式化" onclick="javascript:autoFormatSelection()" />
            &nbsp;<input type="button" value="注释选中" onclick="javascript:commentSelection(true)" />
            &nbsp;<input type="button" value="取消注释" onclick="javascript:commentSelection(false)" />
            &nbsp;字号:
            <select class="faceset">
                <option>14px</option>
                <option>12px</option>
            </select>
            &nbsp:行距:
            <select class="faceset">
                <option>22px</option>
                <option>20px</option>
                <option>18px</option>
            </select>
            &nbsp:外观:
            <select class="faceset" onchange="selectTheme()" id="selectFace">
                <option selected>default</option>
                <option>ambiance</option>
                <option>blackboard</option>
                <option>cobalt</option>
                <option>eclipse</option>
                <option>elegant</option>
                <option>erlang-dark</option>
                <option>lesser-dark</option>
                <option>monokai</option>
                <option>neat</option>
                <option>night</option>
                <option>rubyblue</option>
                <option>vibrant-ink</option>
                <option>xq-dark</option>
            </select>
            <input type="checkbox" id="EnableHightCurrentLine" onchange="setHeightCurrentLint()" /><label
                for="EnableHightCurrentLine">高亮当前行</label>
        </div>
        <form id="form1" runat="server">
        <textarea id="code" name="code" runat="server"></textarea>
        </form>
    </div>
    <script type="text/javascript">
        CodeMirror.modeURL = "CodeMirror/mode/%N/%N.js";
        //初始化编辑器
        var editor = CodeMirror.fromTextArea(document.getElementById("code"),
         {
             //显示行号
             lineNumbers: true,
             ////自动换行
             //wordWrap: true,
             //行号前启用标记
             onGutterClick: function (cm, n) {
                 var info = cm.lineInfo(n);
                 if (info.markerText)
                     cm.clearMarker(n);
                 else
                     cm.setMarker(n, "<span style=\"color: #900\">●</span> %N%");
             }
         });

        function change() {
            editor.setOption("mode", "<% =GetCodeType() %>");
            CodeMirror.autoLoadMode(editor, "<% =GetCodeType() %>");
        }
        var hlLine = editor.setLineClass(0, "activeline");

        function getSelectedRange() {
            return { from: editor.getCursor(true), to: editor.getCursor(false) };
        }

        //格式化选中
        function autoFormatSelection() {
            var range = getSelectedRange();
            editor.autoFormatRange(range.from, range.to);
        }

        //注释选中
        function commentSelection(isComment) {
            var range = getSelectedRange();
            editor.commentRange(isComment, range.from, range.to);
        }

        //启用禁用高亮
        function setHeightCurrentLint() {
            if ($("#EnableHightCurrentLine").attr("checked") == "checked") {
                editor.setOption("onCursorActivity", function () {
                    editor.matchHighlight("CodeMirror-matchhighlight");
                    editor.setLineClass(hlLine, null, null);
                    hlLine = editor.setLineClass(editor.getCursor().line, null, "activeline");
                });
            }
            else {
                editor.setOption("onCursorActivity", function () {
                    editor.matchHighlight("CodeMirror-matchhighlight");
                    editor.setLineClass(hlLine, null, null);
                    hlLine = editor.setLineClass(editor.getCursor().line, null, "");
                });
            }
        }

        //选择皮肤
        var input = document.getElementById("selectFace");
        function selectTheme() {
            var theme = input.options[input.selectedIndex].innerHTML;
            editor.setOption("theme", theme);
        }
        var choice = document.location.search && document.location.search.slice(1);
        if (choice) {
            input.value = choice;
            editor.setOption("theme", choice);
        }

        //加载初始化
        function init() {
            change();
            //默认皮肤
            editor.setOption("theme", "default");
        }

        function GetRequest() {
            var url = location.search; //获取url中"?"符后的字串
            var theRequest = new Object();
            if (url.indexOf("?") != -1) {
                var str = url.substr(1);
                strs = str.split("&");
                for (var i = 0; i < strs.length; i++) {
                    theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
                }
            }
            return theRequest;
        }
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            var Request = new Object();
            Request = GetRequest();
            if (Request['width'] != null) {
                searchtxt = escape(Request['width']);
                $(".mainbody").css("width", Request['width'] + "px")
            }
            $(".faceset").change(function () {
                $("#styleContainor").html("<style type=\"text/css\">.CodeMirror .CodeMirror-lines pre{font-size: " + $(".faceset").eq(0).find("option:selected").text() + ";line-height: " + $(".faceset").eq(1).find("option:selected").text() + ";} .CodeMirror pre{font-size: " + $(".faceset").eq(0).find("option:selected").text() + ";line-height: " + $(".faceset").eq(1).find("option:selected").text() + ";}</style>");
            });
        })
    </script>
</body>
</html>
